<template>
  <div class="container" style="background: #ebeffa; height: 100%">
    <el-form class="query-form" :inline="true" :model="formQuery">
      <el-col :span="3">
        <el-form-item>
          <el-select clearable @clear="provincesChange" @change="provincesChange" v-model="formQuery.provinceId"
            placeholder="省">
            <el-option v-for="item in provinces" :key="item.id" :value="item.id" :label="item.areaname"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item>
          <el-select clearable @clear="citysChange" @change="citysChange" v-model="formQuery.cityId" placeholder="市">
            <el-option v-for="item in citys" :key="item.id" :value="item.id" :label="item.areaname"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item>
          <el-select clearable v-model="formQuery.areaId" placeholder="区">
            <el-option v-for="item in areas" :key="item.id" :value="item.id" :label="item.areaname"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="3">
				<el-form-item>
					<el-select v-model="formQuery.fjlx" placeholder="房间类型">
					</el-select>
				</el-form-item>
			</el-col> -->
      <el-col :span="4">
        <el-form-item>
          <el-input v-model="formQuery.inputString" @keyup.enter.native="queryDoorModel" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item>
          <el-select clearable v-model="formQuery.fkBuildingId" placeholder="所属楼宇">
            <el-option v-for="item in buildingData" :key="item.pkBuildingId" :value="item.pkBuildingId" :label="item.buildingName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item>
          <el-select clearable v-model="formQuery.fkRoomTypeId" placeholder="房间户型">
            <el-option v-for="item in roomType" :key="item.pkBasicdataId" :value="item.pkBasicdataId"
              :label="item.itemName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-form-item>
        <el-button @click="query">查询</el-button>
      </el-form-item>
      <el-form-item style="position:absolute;right:0.2rem;">
        <el-button type="primary" @click="$router.push('./edit')">新增</el-button>
      </el-form-item>
    </el-form>
    <door-model-list type="list" :doorModel="doorModel" :supportingFacilities="supportingFacilities"
      :roomType="roomType" :facing="facing" @reLoad="loadDataProxy"></door-model-list>
    <div class="page-div">
      <el-pagination layout="prev, pager, next,jumper,sizes" :current-page="pageObj.page" :page-size="pageObj.pageSize"
        :total="pageObj.total" @current-change="currentPageChange" @size-change="sizeChange" :page-sizes='pageObj.pageSizes'></el-pagination>
    </div>
  </div>
</template>

<script>
  import { Loading } from "element-ui";
  import { listMixin } from "@/mixin";

  import {
    getBuildingName,
  } from "@/api/house/building/building.js";
  import { getOneAll, selectNameToId, getPosition } from "@/api/common/common.js";
  import doorModelList from "@/components/doorModelList";
  import {
    getHouseType,
    getHouseTypeLikeName,
  } from "../../../api/house/type/type.js";
  export default {
    mixins: [listMixin],
    components: {
      doorModelList
    },
    data() {
      return {
        buildingData: [],
        formQuery: {
          provinceId: null,
          cityId: null,
          areaId: null,
        },
        doorModel: [],
        provinces: [],
        citys: [],
        areas: [],
        roomType: [],
        facing: [],
        supportingFacilities: []
      };
    },
    methods: {
      loadData() {
        if (this.where) {
          return getHouseTypeLikeName(this.where).then((result) => {
            let { data, total } = result;
            this.pageObj.total = total;
            this.doorModel = data;
          });
        } else {
          return getHouseType(this.pageObj).then((result) => {
            let { data, total } = result;
            this.pageObj.total = total;
            this.doorModel = data;
          });
        }
      },
      provincesChange() {
        this.formQuery.cityId = null;
        this.formQuery.areaId = null;
        this.citys = [];
        if (this.formQuery.provinceId) {
          getPosition(this.formQuery.provinceId).then((result) => {
            this.citys = result.data;
          });
        }
      },
      citysChange(v) {
        this.formQuery.areaId = null;
        this.areas = [];
        if (this.formQuery.cityId) {
          getPosition(v).then((result) => {
            this.areas = result.data;
          });
        }
      },
    },
    mounted() {
        getPosition(0).then((result) => {
            this.provinces = result.data;
        });
        let go1 = new Promise((resolve, rejevt) => {
            getOneAll(selectNameToId('roomType')).then(res => {
            this.roomType = res.data;
            resolve();
            });
        });
        let go2 = new Promise((resolve, rejevt) => {
            getOneAll(selectNameToId('facing')).then(res => {
            this.facing = res.data;
            resolve();
            });
        })
        let go3 = new Promise((resolve, rejevt) => {
            getOneAll(selectNameToId('supportingFacilities')).then(res => {
            this.supportingFacilities = res.data;
            resolve();
            });
        })
        let go4 = new Promise((resolve, rejevt) => {
            getBuildingName().then((res) => {
            this.buildingData = res.data;
            resolve();
            });
        })
        this.loadDataProxy();
    },
  };
</script>

<style scoped>
  .el-pagination__jump {
    margin: 0px;
  }

  .div-table {
    height: calc(100% - 0.8rem - 1rem);
  }
</style>
